//https://blog.csdn.net/zl1zl2zl3/article/details/81357146
import { PureComponent } from 'react';
import {
  Row,
  Col,
  Form,
  Input,
  InputNumber,
  Select,
  Modal,
} from 'antd';

const FormItem = Form.Item;
const { Option } = Select;

// 修改表单
@Form.create()
class UpdateForm extends PureComponent {
  static defaultProps = {
    handleUpdateByAuth: () => {},
    handleUpdateModalVisibleByAuth: () => {},
    values: {},
  };

  constructor(props) {
    super(props);

    this.state = {
      formVals: {
        auth_id: props.values.auth_id,
        auth_name: props.values.auth_name,
        auth_type: props.values.auth_type,
        auth_description: props.values.auth_description,
        auth_level: props.values.auth_level,
        display: props.values.display,
        note: props.values.note,
        is_system_auth: props.values.is_system_auth,
        creator_id: props.values.creator_id,
        parent_id: props.values.parent_id,
      },
    };


  }

  handleLocalUpdate = () => {
    const { form, handleUpdateByAuth } = this.props;
    const { formVals: oldValue } = this.state;
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      const formVals = { ...oldValue, ...fieldsValue };
      this.setState({
        formVals,
      });

      handleUpdateByAuth(formVals);

    });
  };


  renderContent = (formVals) => {
    const { form } = this.props;

    return (
      <Form  layout="vertical">

                <Row gutter={{ md: 8, lg: 24, xl: 48 }}>

                    <Col  md={12} sm={24}>
                    <FormItem  label="角色名称">
                        {form.getFieldDecorator('auth_name', {
                        rules: [{ required: true, message: '请输入角色名称！', min: 1 }],
                        initialValue: formVals.auth_name,
                        })(<Input placeholder="请输入" />)}
                    </FormItem>
                    </Col>


                    <Col  md={12} sm={24}>
                    <FormItem  label="角色类型">
                        {form.getFieldDecorator('auth_type', {
                        rules: [{ required: true, message: '请输入以ROLE_开头与多个大写字母组合的角色类型！',pattern:/^ROLE_[A-Z]+$/}],
                        initialValue: formVals.auth_type,
                        })(<Input placeholder="请输入" />)}
                    </FormItem>
                    </Col>

                </Row>

                <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                
						        <Col  md={12} sm={24}>
								        <FormItem  label="角色级别">
								            {form.getFieldDecorator('auth_level', {
								            rules: [{ required: true, message: '请输入角色级别'}],
								            initialValue: formVals.auth_level,
								            })(<InputNumber placeholder="请输入" style={{width: '100%'}}/>)}
								        </FormItem>
						        </Col>
                    <Col  md={12} sm={24}>
		                    <FormItem  label="描述信息">
		                        {form.getFieldDecorator('auth_description', {
		                        rules: [{ required: false }],
		                        initialValue: formVals.auth_description,
		                        })(<Input placeholder="请输入" />)}
		                    </FormItem>
                    </Col>
                    
                </Row>

    </Form>
    );

  };



  render() {
    const { updateModalVisibleByAuth, handleUpdateModalVisibleByAuth, values } = this.props;
    const { formVals } = this.state;

    return (
      <Modal
    width={800}
    bodyStyle={{ padding: '32px 40px 48px' }}
    destroyOnClose
    title="修改"
    visible={updateModalVisibleByAuth}
    onOk={() => this.handleLocalUpdate()}
    onCancel={() => handleUpdateModalVisibleByAuth(false, values)}
    afterClose={() => handleUpdateModalVisibleByAuth()}
>

    {this.renderContent(formVals)}
</Modal>
    );
  }

}

export default UpdateForm;


